<template>
  <div class="container">
    <baleTable
      :tableData="tableData"
      :tableHead="tableHead"
      :isSearch="true"
      :tableLoading="tableLoading"
      :page="page"
      @pageSizeChange="pageSizeChange"
      @handleCurrentChange="handleCurrentChange"
      @searchMethods="searchMethods"
      @tableSortChange="tableSortChange"
      @handleRowClick="handleRowClick"
      ref="baleTable"
    >
      <template #headLeft>
        <div
          class="ml10 tableStats-btn tableStats-btn-active"
          @click="showDialog"
        >
          发放优惠券
        </div>
      </template>

      <template #daily="{ scope }">
        <p @click.stop="">
          <el-switch
            :value="scope.row.daily"
            :active-value="1"
            :inactive-value="0"
            active-text="开启"
            inactive-text="关闭"
            @change="(val)=>changeDaily(val,scope.row.id)">
          </el-switch>
        </p>
      </template>

      <!--    操作 -->
      <template #tableOperation="{ scope }">
        <el-button type="primary" size="small" @click="showDetail(scope.row)"
          >查看领取记录</el-button
        >
      </template>
    </baleTable>

    <editDialog
      ref="dialog"
      :couponData="couponData"
      @refresh="getTableData"
    ></editDialog>
    <detail ref="detail" @refresh="getTableData" />
  </div>
</template>

<script>
import { ApiGetCouponSendList, ApiGetCouponList,ApiCouponChangeDaily } from "@a/index";
import { tableHead } from "./config";
import editDialog from "./component/basicDialog.vue";
import detail from "./component/detail.vue";
export default {
  components: {
    editDialog,
    detail,
  },
  data() {
    return {
      tableHead,
      tableData: [],
      page: {
        page: 1,
        size: 25,
        total: 0,
      },
      tableLoading: false,
      searchParams: {},
      sortParams: {},
      editFormVisible: false,
      btnLoading: false,
      couponData: [],
    };
  },
  mounted() {
    this.getTableData();
    this.getCouponData();
  },
  methods: {
    changeDaily(val, id) {
      const str = val? "开启" : "关闭"
      this.$confirm(
        `确定${str}每日自动发放吗？`,
        "提示",
        {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          dangerouslyUseHTMLString: true,
          center: true,
        }
      )
        .then(() => {
          ApiCouponChangeDaily(id,{daily:val}).then(_=>{
            this.getTableData()
          })
        })
        .catch(() => {});
      console.log(val, id)
    },
    showDetail(row) {
      this.$refs.detail.show(row);
    },
    //编辑界面
    onEdit() {},
    showDialog(val) {
      this.$refs.dialog.show(val);
    },
    getCouponData() {
      ApiGetCouponList({ allPage: 2 }).then((res) => {
        this.couponData = res.data;
      });
    },
    getTableData(params = {}) {
      let postParams = {
        ...params,
        ...this.searchParams,
        ...this.sortParams,
        ...this.page,
      };
      this.tableLoading = true;
      ApiGetCouponSendList(postParams).then((res) => {
        let { data, page } = res;
        this.tableData = data;
        this.page.total = page.total;
        this.tableLoading = false;
      });
    },
    searchMethods(params) {
      this.searchParams = {};
      this.page.page = 1;
      this.searchParams = params;
      this.getTableData();
    },
    pageSizeChange(val) {
      this.page.size = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      this.page.page = val;
      this.getTableData();
    },
    tableSortChange(params) {
      if (params.sort_str) {
        this.sortParams = { ...this.sortParams, ...params };
      } else {
        delete this.sortParams.sort_str;
        delete this.sortParams.sort_order;
      }
      this.page.page = 1;
      this.getTableData();
    },
    handleRowClick(params) {},
  },
  filters: {},
};
</script>

<style lang="less" scoped></style>
